<template>
    <layout>
        <div class="ctrl">
            <el-input v-model="key" placeholder="请输入关键字" style="width:200px"></el-input>
            <el-button-group>
                <el-button @click="dialogFormVisible = true" >批量绑定角色</el-button>
                <el-button @click="$router.push('/user/create')">新增用户</el-button>
            </el-button-group>
        </div>

        <el-table :data="tableData" border style="width: 100%" @selection-change="handleSelectionChange">
            <el-table-column type="selection" width="55"></el-table-column>
            <el-table-column  prop="id" label="ID" ></el-table-column>
            <el-table-column  prop="username" label="账号" ></el-table-column>
            <el-table-column  prop="role" label="角色" ></el-table-column>
            <el-table-column  prop="nickname" label="姓名" ></el-table-column>
            <el-table-column
            fixed="right"
            label="操作"
            width="150">
            <template slot-scope="scope">
                <el-button type="text" size="small" @click="$router.push(`/user/permission/${scope.row.id}`)">权限</el-button>
                <el-button type="text" size="small" @click="$router.push('/user/edit/' + scope.row.id)">编辑</el-button>
                <el-button type="text" size="small" @click="del(scope.row,scope.$index)">删除</el-button>
            </template>
            </el-table-column>
    </el-table>


    <el-pagination  style="margin-top:15px; float: right" @current-change="getData" :current-page="currentPage"
      :page-size="2"
      layout="total, prev, pager, next, jumper"
      :total="total">
    </el-pagination>




    <el-dialog title="请选择需要绑定的角色" :visible.sync="dialogFormVisible">
    <el-form>
        <el-form-item label="角色选择">
            <el-select v-model="roleId" placeholder="请选择">
                <el-option v-for="(item, index) in permissions" :label="item.name" :value="item.id" :key="index">
                    {{item.name}}
                </el-option>
            </el-select>
        </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="batch">确 定</el-button>
    </div>
    </el-dialog>

    </layout>
</template>
<script>
export default {
    data() {
        return {
            permissions:[],
            roleId:'',
            roleIds:[],
            userIds:[],
            dialogFormVisible: false,
            tableData: [],
            total:1,
            currentPage:1,
            key: ''
        }
    },
    created() {
        this.getData()
        this.$http.get(`/role/select`).then(res => {
            if(res.errcode == 0){
                this.permissions = res.data
            }
        })

    },
    watch: {
        key(val) {
            this.getData()
        }
    },
    methods: {
        batch(){
            this.$http.post(`/user/role/update/`,{
                roleIds : [ this.roleId ],
                userIds : this.userIds
            }).then(res => {
                if(res.errcode == 0){
                    this.getData()
                }
            })
            this.dialogFormVisible = false
        },
        handleSelectionChange(items){
            this.userIds = items.map(item => item.id)
        },
        getData(page){
            if(page){
                this.currentPage = page
            }
            let push = `/user/page?currentPage=${this.currentPage}`
            if(this.key){
                push = `/user/page?currentPage=${this.currentPage}&key=${this.key}`
            }
            this.$http.get(push).then(res => {
                if(res.errcode == 0){
                    let data = res.data
                    this.tableData = data.list
                    this.total = data.count
                    this.currentPage = parseInt(data.currentPage)
                }
            })
        },
        del(item, index){
            this.$confirm('此操作将永久删除, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                this.$http.post('/user/trash',{
                    id: item.id
                }).then(res => {
                    if(res.errcode == 0){
                        this.tableData.splice(index, 1)
                    }
                    this.$message({
                        type: 'success',
                        message: '删除成功!'
                    });
                })
            }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });          
            });

        }
    }
}
</script>

<style>
.ctrl {
    display: flex;
    justify-content: space-between;
    margin-bottom: 15px;
}
</style>